<template>
	<view class="container">
		<view class="title" :style="{ marginTop: safeTop + 'px'}">
			<image class="back" @tap="back" src="http://8.137.80.244/mogu/tongzhi/ic_back.png"></image>
			<text>编辑入库</text>
		</view>
		<view class="item">
			<text>名称<text class="red">*</text></text>
			<input placeholder="输入你的玩具名称"/>
		</view>
		<view class="item">
			<text>工作室<text class="red">*</text></text>
			<input placeholder="输入工作室名称"/>
		</view>
		<view class="item">
			<text>版本</text>
			<input placeholder="输入玩具版本"/>
		</view>
		<view class="item-area">
			<text>描述</text>
			<textarea class="textarea" placeholder="添加你的玩具描述"></textarea>
			<text class="num">0/500</text>
		</view>
		<view class="item-image">
			<text>图片<text class="red">*</text></text>
			<view class="contet">
								<image src="http://8.137.80.244/mogu/accou/add.png"></image>
								<text class="limit">限制<text class="limit-red">2M</text></text>
			</view>
		</view>
		<!-- 补款状态 -->
		<view class="item-zhuangtai">
			<text>补款状态</text>
			<view class="contet">
				<view class="button" :class="{select : curryType === 0}" @tap="selectType(0)">
					<text class="text">已预定</text>
				</view>
				<view class="button" :class="{select : curryType === 1}" @tap="selectType(1)">
					<text class="text">已补款</text>
				</view>
			</view>
		</view>
		<view class="item">
			<text>定金</text>
			<input placeholder="输入你的定金金额"/>
		</view>
		<view class="item-date">
			<text>预计出货时间</text>
			<!-- :start="startDate" :end="endDate" -->
			<view class="content">
				<picker mode="date" :value="date"  @change="bindDateChange">
					<view class="mydate">{{mydate}}</view>
				</picker>
			</view>
		</view>
		<view class="item-ip">
			<text class="title">常用IP</text>
			<!-- :start="startDate" :end="endDate" -->
			<view class="content">
				<view class="button"  
				@tap="selectIp(item.id)"
				v-for="item in buttons"
				:class="{ select : item.select }">
					<text class="text">海贼王</text>
				</view>
			</view>
		</view>
		
		<view class="item-area">
			<text>标签</text>
			<textarea placeholder="添加你的标签描述" value="#龙珠  #火影"></textarea>
			<text class="num">0/500</text>
		</view>
		
		<view class="bottom-button">
			<view class="play-button">
				提交
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	// 获取安全区域
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
	
	const safeTop = safeAreaInsets.top + 5
	
	// 当前选中的类型
	const curryType = ref(0)
	// 点击切换类型
	const selectType = (e) => {
		curryType.value = e
		console.log(curryType.value);
	}
	onLoad(()=>{
		getDate()
	})
	const mydate = ref('')
	const getDate = (type)=>{
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            mydate.value =  `${year}/${month}/${day}`;
    }
	
	const bindDateChange = (e)=> {
		let date = e.detail.value.split('-')
	    mydate.value = `${date[0]}/${date[1]}/${date[2]}`
	}
	const startDate = "sdfd"
	const buttons = ref([
		{
			id:0,
			name:'海贼王',
			select:true
		},
		{
			id:1,
			name:'海贼王',
			select:false
		},
		{
			id:2,
			name:'海贼王',
			select:false
		},
		{
			id:3,
			name:'海贼王',
			select:false
		},
		{
			id:4,
			name:'海贼王',
			select:false
		},
		{
			id:5,
			name:'海贼王',
			select:false
		},
		{
			id:6,
			name:'海贼王',
			select:false
		},
	])
	const selectIp = (id)=>{
		console.log(id);
		buttons.value[id].select = !buttons.value[id].select
	}
</script>

<style scoped lang="scss">
	@font-face {
		font-family: zihunbiantaoti;
		src: url('https://gitee.com/yxk756/mogu/raw/main/static/fonts/zihunbiantaoti.ttf');
	}

	.container {
		box-sizing: border-box;
	}
	.red{
		color: red;
		margin-left: 6rpx;
	}
	.bottom-button{
		margin-top: 60rpx;
		// margin-bottom: 489rpx;
		// background-color: #0B0B0B;
		height: 179rpx;
		.play-button {
			width: 690rpx;
			height: 90rpx;
			background: #FFDD1A;
			border-radius: 45rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			line-height: 45rpx;
			text-align: center;
			font-style: normal;
			
		}
	}
	
	.item-ip{
		margin-top: 40rpx;
		padding-right: 0 30rpx;
		box-sizing: border-box;
		.title{
			margin-left: 30rpx;
		}
		.content{
			margin-left: 12rpx;
			box-sizing: border-box;
			// margin-top: 20rpx;
			// background: #F4F5F8;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			// padding-left: 21rpx;
			flex-wrap: wrap;
			.button{
				margin-left: 18rpx;
				margin-top: 20rpx;
			}
		}
	}
	.item-date{
		margin-top: 40rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		
		.content{
			box-sizing: border-box;
			margin-top: 20rpx;
			width: 690rpx;
			height: 100rpx;
			background: #F4F5F8;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			padding-left: 21rpx;
			.mydate{
				
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
		.item-zhuangtai{
			margin-top: 40rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.contet{
				display: flex;
				// background-color: #000000;
				margin-top: 20rpx;
				.button:last-child{
					margin-left: 18rpx;
				}
				
			}
		}
		.button {
			width: 159rpx;
			height: 60rpx;
		
			border-radius: 30rpx;
			// margin-left: 30rpx;
			background-color: #F4F5F8;
			color: #0B0B0B;
	
			display: flex;
			justify-content: center;
			align-items: center;
			
			.text {
				width: 72rpx;
				height: 33rpx;
				// padding: 14rpx 26rpx 13rpx 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;
		
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
			}
		
		}
		.select {
			// height: 300rpx !important;
			color: #222222 !important;
			
			background-color: rgba(255, 221, 26, 1) !important;
		}
	.item-image{
		margin-top: 40rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.contet{
			width: 200rpx;
			height: 200rpx;
			background: #F4F5F8;
			border-radius: 10rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 80rpx;
				height: 80rpx;
			}
			.limit{
				margin-top: 27rpx;
				width: 85rpx;
				height: 33rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				.limit-red{
					color: rgba(224, 32, 32, 1);
				}
			}
		}
		
	}
	.item-area{
		margin-top: 40rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		textarea{
			box-sizing: border-box;
			width: 690rpx;
			height: 300rpx;
			background: #F4F5F8;
			border-radius: 10rpx;
			padding: 0 21rpx;
			padding-top:21rpx ;
			margin-top: 20rpx;
		}
		.num{
			position: absolute;
			right: 50rpx;
			bottom: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #979A9E;
			line-height: 40rpx;
			// text-align: left;
			font-style: normal;
		}
		
	}
	.item{
		margin-top: 40rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		input{
			margin-top: 20rpx;
			width: 690rpx;
			box-sizing: border-box;
			height: 100rpx;
			background: #F4F5F8;
			border-radius: 10rpx;
			
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #979A9E;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			padding: 0 21rpx;
		}
	}
	.title{
		display: flex;
		align-items: center;
		
		.back{
			// position: absolute;
			margin-left: 10rpx;
			width: 60rpx;
			height: 60rpx;
		}
		text{
			width: 144rpx;
			height: 50rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #000000;
			line-height: 50rpx;
			text-align: left;
			font-style: normal;
			margin-left:10rpx;
		}
	}

</style>
